<template>
  <div class="check-con">
    <div v-if="props.currentRow.approveLevel > 3">
      <div>
        <p class="title">审核记录</p>
        <table class="m-table">
          <tr>
            <td>序号</td>
            <td>审核步骤</td>
            <td>审核人</td>
            <td>审核人意见</td>
            <td>审核结果</td>
            <td>签字确认</td>
          </tr>
          <tr v-for="(item, index) in checkRecordList">
            <td>{{ index + 1 }}</td>
            <td>{{ cStepList[index] }}</td>
            <td>{{ item.approveUserName }}</td>
            <td>{{ item.approveDescription }}</td>
            <td :class="['td-result', item.approveStatus && resultItem[item.approveStatus].class]">
              {{ index > 2 ? item.approveStatus && resultItem[item.approveStatus].text : '' }}
            </td>
            <td>{{ item.signUrl }}</td>
          </tr>
        </table>
      </div>
      <el-divider>
        <el-icon><star-filled /></el-icon>
      </el-divider>
    </div>

    <div>
      <p class="title">审核操作</p>
      <el-form ref="checkFormRef" :model="checkForm" :rules="rules" label-width="150px" class="demo-ruleForm"
        size="large" status-icon>
        <el-row>
          <el-col :span="12" v-if="props.currentRow.approveLevel == 4">
            <el-form-item label="是否同意经办人：" prop="tyjbr">
              <!-- <el-select @change="changeStatus" v-model="checkForm.tyjbr" placeholder="请选择" style="width: 100%">
              <el-option label="同意" value="1" />
              <el-option label="不同意" value="2" />
            </el-select> -->
              <el-radio-group @change="changeAgree" v-model="checkForm.tyjbr" placeholder="请选择">
                <el-radio label="1" size="large" border>同意</el-radio>
                <el-radio label="2" size="large" border>不同意</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="年检结果：" prop="approveStatus">
              <el-radio-group :disabled="checkForm.tyjbr == 1 ? true : false" @change="changeStatus"
                v-model="checkForm.approveStatus" placeholder="请选择">
                <el-radio v-for="(item, index) in resultItem1" :disabled="checkForm.tyjbr == 2 && jbrResylt == item.val"
                  :label="item.val" size="large" border>{{ item.text }}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="10">
          <el-col :span="12">
            <el-form-item label="审核意见：" prop="approveDescription">
              <el-input style="width: 100%" v-model="checkForm.approveDescription" type="textarea"
                placeholder="请输入审核意见" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="签字确认：" prop="signUrl">
              <el-input style="width: 100%" v-model="checkForm.signUrl" type="textarea" placeholder="请输入签字确认" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row v-if="!(props.currentRow.approveLevel == 4 || props.currentRow.approveLevel == 6)">
          <el-col :span="12">
            <el-form-item label="选择部门" prop="orgId">
              <MTreeSelect v-model="checkForm.orgId" placeholder="请选择下一个审核部门" :data="orgData" :fields="{
                value: 'deptId',
                label: 'deptName',
                children: 'children'
              }" style="width: 100%" :check-strictly="true" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="选择人员">
              <el-select filterable style="width:100%;" v-model="checkForm.approveNext" placeholder="请选择下一个审核人员">
                <el-option :label="item.nickName" :value="item.userId" v-for="item in personData" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <!-- <el-form-item label="附件上传" prop="r3">
        <el-upload class="upload-demo" drag action="" multiple style="width: 320px">
          <el-icon class="el-icon--upload">
            <Plus />
          </el-icon>
          <div class="el-upload__text">点击或拖拽文件到此处上传</div>
        </el-upload>
      </el-form-item> -->
      </el-form>
    </div>
  </div>

  <div style="margin-top: 30px; text-align: center">
    <el-button :icon="CircleClose" type="plain" @click="toClose()">关闭</el-button>
    <el-button :icon="Coordinate" type="primary" @click="submitForm(checkFormRef)" :loading="saveLoad">提交审核 </el-button>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, nextTick, onMounted, watch } from 'vue'
import { useUserStore } from '@/store'
import { toCheck, getCheckStep, getGCheckStep } from '@/api/yearCheck/index'
import { getTree, getList } from '@/api/systemSetting/personnel'
import { ElMessage } from 'element-plus'
import { StarFilled, CircleClose, Coordinate } from '@element-plus/icons-vue'
const orgData = ref([])
const personData = ref([])
const checkRecordList = ref([])
const jbrResylt = ref('')  //经办人审核结果
let cStepList = ref(['提交申请', '校对检查', '主管单位管理员指派', '主管单位经办人审核', '主管单位分管领导审核', '登记单位审核', '最终结果'])


const resultItem = [{
  text: '',
  class: ''
}, {
  text: '合格',
  class: 'pass'
}, {
  text: '基本合格',
  class: 'base-pass'
}, {
  text: '不合格',
  class: 'no-pass'
}]

const resultItem1 = [{
  text: '合格',
  val: '1'
}, {
  text: '基本合格',
  val: '2'
}, {
  text: '不合格',
  val: '3'
}]

const userStore = useUserStore();
const user = userStore.userInfo;



const emit = defineEmits(['close'])

const props = defineProps({
  currentRow: {
    type: Object,
    default: {}
  }
})
const checkForm = reactive({
  approveDescription: '',
  signUrl: '', //签字图片
  approveStatus: '', //审核结果
  approveNext: '', //指派下一审核人
  orgId: '',
  tyjbr: '',
  id: props.currentRow.id,
})

const checkFormRef = ref()
const saveLoad = ref(false)

const rules = reactive({
  approveStatus: [
    {
      required: true,
      trigger: 'change',
      message: '请选择审核结果'
    }
  ],
  approveDescription: [
    {
      required: true,
      trigger: 'blur',
      message: '请输入年检审核意见'
    }
  ],
  approveNext: [
    {
      required: props.currentRow.approveLevel == 4 || props.currentRow.approveLevel == 6,
      trigger: 'change',
      message: '请选择年检下一审核人'
    }
  ]
})

watch(
  () => checkForm.orgId,
  (val) => {
    getPersonList(val)
  }
)

onMounted(() => {
  getTree({ parentId: props.currentRow.supervisoryCode }).then((res: any) => {
    orgData.value = res.data
  })
  getPersonList(props.currentRow.supervisoryCode)
  getCStepList()
})

const toClose = () => {
  emit('close')
}

const toCloseAll = () => {
  emit('saveSuccess')
}

//选择部门查人
const getPersonList = (deptId) => {
  checkForm.approveNext = ''
  getList({ deptId, pageSize: 10000, pageNum: 1 }).then(res => {
    personData.value = res.rows
  })
}

const submitForm = async (formEl) => {
  await formEl.validate((valid, fields) => {
    if (valid) {
      saveLoad.value = true
      toCheck({ ...checkForm }).then(res => {
        ElMessage({
          message: '审核提交成功',
          type: 'success'
        })
        toCloseAll()
        saveLoad.value = false
      })
    } else {
      console.log('error submit!', fields)
    }
  })
}

const getCStepList = () => {
  getGCheckStep(props.currentRow.id).then(res => {
    checkRecordList.value = res.data;
    jbrResylt.value = res.data[3].approveStatus + ''
  })
}

const changeStatus = (val) => {
  rules.approveDescription[0].required = val == 1 ? false : true
}
const changeAgree = (val) => {
  if (val == 1) {
    checkForm.approveStatus = jbrResylt.value
  } else {
    checkForm.approveStatus = ''
  }
  changeStatus(jbrResylt.value)
}

</script>
<style scoped lang="scss">
.check-con {
  width: 100%;
}

.title {
  height: 40px;
  line-height: 40px;
  font-size: 16px;
  position: relative;
  padding-left: 15px;

  &:before {
    width: 7px;
    height: 19px;
    position: absolute;
    content: "";
    background-color: #1c85ff;
    left: 0;
    top: 12px;
    border-radius: 3px;
  }
}

::v-deep .el-dialog__body {
  padding-top: 10px !important;
}

.td-result {
  color: #28c04e;

  &.base-pass {
    color: #e9a586;
  }

  &.no-pass {
    color: #e22c4a;
  }
}
</style>
